<template>
    <div class="el_city_list">
      <header class="el_header box">
        <router-link to="/">
          <div class="el_logo">饿了么</div>
        </router-link>
        <div class="el_info">{{title}}</div>
        <router-link to="/login">
          <div class="el_login">登录|注册</div>
        </router-link>
      </header>
      <div class="el_current_city">
        <p>当前定位城市：</p>
        <span>定位不准时，请在列表中选择</span>
      </div>
      <div class="el_current_city_name">
        <router-link :to="{ name: 'city', params: { city: current_city_id }}">
          <p class="el_current_name">{{current_city}}</p>
          <p class="icon el-icon-arrow-right"></p>
        </router-link>
      </div>
      <div class="el_hot_city">
        <p class="el_hot_city_name">热门城市</p>
        <div class="el_hot_city_table">
          <div class="el_hot_city_wrap" v-for="x in hot_city">
            <router-link :to="{ name: 'city', params: { city: x.id }}">
              {{x.name}}
            </router-link>
          </div>
        </div>
      </div>
      <div class="el_hot_city el_city_list" v-for="(key,index) in city_list">
        <p class="el_hot_city_name">{{index}}</p>
        <div class="el_hot_city_table">
          <div class="el_hot_city_wrap" v-for="x in key">
            <router-link class="link" :to="{ name: 'city', params: { city: x.id }}">
              {{x.name}}
            </router-link>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
  export default{
    data(){
      return{
        title:'',
        current_city:'',
        hot_city:[],
        city_list:[],
        current_city_id:''
      }
    },
    methods:{
      get_current_city(){
        this.axios.get('/v1/cities?type=guess')
          .then((res)=>{
            this.current_city = res.data.name;
            this.id = res.data.id;
            this.current_city_id = res.data.id;
          })
          .catch((res)=>{
            console.log(res);
          })
      },
      get_hot_city(){
        this.axios.get('/v1/cities?type=hot')
          .then((res)=>{
            this.hot_city = res.data;
          })
          .catch((res)=>{
            console.log(res);
          })
      },
      get_city_list(){
        this.axios('/v1/cities?type=group')
          .then((res)=>{
            this.city_list = res.data;
          })
          .catch((res)=>{
            console.log(res);
          })
      }
    },
    created(){
      this.get_current_city();
      this.get_hot_city();
      this.get_city_list();
    },
  }
</script>
<style scoped lang="sass">
  @import "../assets/stylesheets/list.scss";
</style>
